<template>
  <div>
    <sunDrawerBack :parent="this.$parent.$parent" show="show_addList" />
    <el-page-header class="sun-el-page-header" :content="name" @back="goBack" />
    <el-form ref="refForm" class="sun-el-form" :model="formData" style="padding: 14px;background: #FFFFFF;margin-top: 51px">
      <span v-for="item in dataList" :key="item.key">
        <span v-if="item.type === 'input' || item.type === 'text' || item.type === 'number'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-input v-model="formData[item.key]" :min="item.type === 'number' ? '0' : ''" :type="item.type" :placeholder="item.describe" @change="inputBlur($event, item.key)" />
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
        <span v-if="item.type === 'select'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-select v-model="formData[item.key]" :placeholder="item.describe || ''" @change="selectOption($event, item.key)">
              <el-option
                v-for="selectItem in item.options"
                :key="selectItem.key"
                :label="selectItem.name"
                :value="selectItem.key"
              />
            </el-select>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
          <span v-for="el in item.options" :key="el.key">
            <span v-if="el.key === formData[item.key]">
              <span v-for="e in el.attribute" :key="e.key">
                <el-form-item
                  :label="e.name"
                  :prop="e.key"
                >
                  <div v-if="e.key === 'exf'">
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.img_checkAll" label="图片类型" border size="mini" :indeterminate="isIndeterminate.img_isIndeterminate" @change="checkboxAll($event, 'img')" />
                      <el-checkbox-group v-model="imgValue" @change="handleCheckedCitiesChange($event, 'img')">
                        <el-checkbox v-for="imgt in imgList" :key="imgt" :label="imgt">{{ imgt }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.video_checkAll" label="视频类型" border size="mini" :indeterminate="isIndeterminate.video_isIndeterminate" @change="checkboxAll($event, 'video')" />
                      <el-checkbox-group v-model="videoValue" @change="handleCheckedCitiesChange($event, 'video')">
                        <el-checkbox v-for="mp in videoList" :key="mp" :label="mp">{{ mp }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.audio_checkAll" label="音频类型" border size="mini" :indeterminate="isIndeterminate.audio_isIndeterminate" @change="checkboxAll($event, 'audio')" />
                      <el-checkbox-group v-model="audioValue" @change="handleCheckedCitiesChange($event, 'audio')">
                        <el-checkbox v-for="ao in audioList" :key="ao" :label="ao">{{ ao }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.file_checkAll" label="文档类型" border size="mini" :indeterminate="isIndeterminate.file_isIndeterminate" @change="checkboxAll($event, 'file')" />
                      <el-checkbox-group v-model="fileValue" @change="handleCheckedCitiesChange($event, 'file')">
                        <el-checkbox v-for="ft in fileList" :key="ft" :label="ft">{{ ft }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="flex_center_align">
                      <el-checkbox v-model="isCheckAll.zip_checkAll" label="压缩类型" border size="mini" :indeterminate="isIndeterminate.zip_isIndeterminate" @change="checkboxAll($event, 'zip')" />
                      <el-checkbox-group v-model="zipValue" @change="handleCheckedCitiesChange($event, 'zip')">
                        <el-checkbox v-for="zp in zipList" :key="zp" :label="zp">{{ zp }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <span v-else>
                    <el-input v-model="el[item.key + '_' + el.key][e.key]" :min="e.type === 'number' || e.key === 'file_size' ? '0' : ''" :type="e.key === 'file_size' ? 'number' : e.type" :placeholder="e.describe" />
                    <span class="message">{{ e.describe }}</span>
                  </span>
                </el-form-item>
              </span>
            </span>

          </span>
        </span>
        <span v-if="item.type === 'radio'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-radio v-model="formData[item.key]" :label="1">是</el-radio>
            <el-radio v-model="formData[item.key]" :label="0">否</el-radio>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
        <span v-if="item.type === 'checkBox'">
          <el-form-item
            :label="item.name"
            :prop="item.key"
          >
            <el-checkbox-group v-model="formData[item.key]" size="mini" style="display: block;">
              <el-checkbox v-for="value_name in item.options" :key="value_name.id" :label="value_name.value" border>{{ value_name.name }}</el-checkbox>
            </el-checkbox-group>
            <span class="message">{{ item.describe || '' }}</span>
          </el-form-item>
        </span>
      </span>
    </el-form>
    <div style="padding: 14px;border-top: 1px solid #EBEEF5">
      <span class="dialog-footer">
        <el-button size="small" @click="goBack">取 消</el-button>
        <el-button type="primary" size="small" @click="onFinish">完 成</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import SunDrawerBack from '@/sun-components/SunDrawerBack'
// import { values } from 'mock/user'
// import { $tooltips } from '@/sun-components/SunMsg.js'
export default {
  name: 'DataBankAddList',
  components: { SunDrawerBack },
  props: {
    formData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    },
    name: {
      type: String,
      default: '添加'
    }
  },
  data() {
    return {
      select_options: [],
      imgList: ['.png', '.jpg', '.jpeg', '.gif', '.pic', '.tif', '.bmp'],
      imgValue: [],
      videoList: ['.mp4', '.3gp', '.m4v', '.rmvb', '.avi', '.wmv'],
      videoValue: [],
      audioList: ['.mp3', '.wma', '.wav', '.aif'],
      audioValue: [],
      zipList: ['.rar', '.zip', '.7z'],
      zipValue: [],
      fileList: ['.doc', '.pdf', '.docx'],
      fileValue: [],
      isCheckAll: {
        img_checkAll: false,
        video_checkAll: false,
        audio_checkAll: false,
        zip_checkAll: false,
        file_checkAll: false
      },
      isIndeterminate: {
        img_isIndeterminate: false,
        video_isIndeterminate: false,
        audio_isIndeterminate: false,
        zip_isIndeterminate: false,
        file_isIndeterminate: false
      }
    }
  },
  methods: {
    async checkboxAll(e, type) {
      switch (type) {
        case 'img':
          this.$set(this, 'imgValue', e ? this.imgList : [])
          this.isIndeterminate.img_isIndeterminate = false
          break
        case 'video':
          this.$set(this, 'videoValue', e ? this.videoList : [])
          this.isIndeterminate.video_isIndeterminate = false
          break
        case 'file':
          this.$set(this, 'fileValue', e ? this.fileList : [])
          this.isIndeterminate.file_isIndeterminate = false
          break
        case 'audio':
          this.$set(this, 'audioValue', e ? this.audioList : [])
          this.isIndeterminate.audio_isIndeterminate = false
          break
        case 'zip':
          this.$set(this, 'zipValue', e ? this.zipList : [])
          this.isIndeterminate.zip_isIndeterminate = false
          break
      }
    },
    async handleCheckedCitiesChange(value, type) {
      const checkedCount = value.length
      switch (type) {
        case 'img':
          this.isCheckAll.img_checkAll = checkedCount === this.imgList.length
          this.isIndeterminate.img_isIndeterminate = checkedCount > 0 && checkedCount < this.imgList.length
          break
        case 'video':
          this.isCheckAll.video_checkAll = checkedCount === this.videoList.length
          this.isIndeterminate.video_isIndeterminate = checkedCount > 0 && checkedCount < this.videoList.length
          break
        case 'file':
          this.isCheckAll.file_checkAll = checkedCount === this.fileList.length
          this.isIndeterminate.file_isIndeterminate = checkedCount > 0 && checkedCount < this.fileList.length
          break
        case 'audio':
          this.isCheckAll.audio_checkAll = checkedCount === this.audioList.length
          this.isIndeterminate.audio_isIndeterminate = checkedCount > 0 && checkedCount < this.audioList.length
          break
        case 'zip':
          this.isCheckAll.zip_checkAll = checkedCount === this.zipList.length
          this.isIndeterminate.zip_isIndeterminate = checkedCount > 0 && checkedCount < this.zipList.length
          break
      }
    },
    async inputBlur(value, item_key) {
      if (item_key === 'name') {
        let pinyin = ''
        let rs = ''
        var flag = new RegExp("[`~!@#$^&*%^+()=|{}':;''-',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
        for (let i = 0; i < value.length; i++) {
          rs = rs + value.substr(i, 1).replace(flag, '')
        }
        if (rs.length > 3) {
          pinyin = this.$pinyin.getCamelChars(rs).toLowerCase()
        } else {
          pinyin = this.$pinyin.getFullChars(rs).toLowerCase()
        }
        if (pinyin.length > 12) {
          this.formData.key = pinyin.slice(0, 12)
        } else {
          this.formData.key = pinyin
        }
      }
    },
    async selectOption(options_key, item_key) {
      this.initFrom()
      this.dataList?.forEach((e1) => {
        if (e1.key === item_key) {
          e1.options?.forEach((e2) => {
            if (options_key === e2.key) {
              e2['checked'] = true
            } else {
              e2['checked'] = false
            }
          })
        }
      })
    },
    async initFrom() {
      const _that = this
      Object.getOwnPropertyNames(_that.formData)?.forEach(function(key) {
        if (key === 'category') return
        if (_that.formData[key] === null || key === 'name' || key === 'key' || key === 'type') return
        // String 类型
        if (_that.formData[key].constructor === String) {
          _that.formData[key] = ''
        }
        if (_that.formData[key].constructor === Number) {
          // eslint-disable-next-line no-prototype-builtins
          if (_that.$parent.$parent.defaultArray.hasOwnProperty(key)) {
            _that.formData[key] = _that.$parent.$parent.defaultArray[key]
          } else {
            _that.formData[key] = 1
          }
        }
        // Array 类型
        if (_that.formData[key].constructor === Array) {
          _that.formData[key] = []
          return
        }
        // Object 类型
        if (_that.formData[key].constructor === Object) {
          _that.formData[key] = {}
        }
        // Boolean 类型
        if (_that.formData[key].constructor === Boolean) {
          _that.formData[key] = false
        }
      })
      console.log('表单重置', _that.formData)
    },
    async goBack() {
      this.$parent.$parent.drawerClose('show_addList')
    },
    async onFinish() {
      const _that = this
      this.dataList?.forEach((e1) => {
        if (e1.key !== 'permission' && e1.options) {
          e1.options?.forEach((e2) => {
            if (e2.checked) {
              Object.assign(_that.formData, e2[e1.key + '_' + e2.key])
            }
          })
        }
      })
      _that.formData.exf = {
        'imgValue': _that.imgValue,
        'zipValue': _that.zipValue,
        'fileValue': _that.fileValue,
        'videoValue': _that.videoValue,
        'audioValue': _that.audioValue
      }
      console.log('_that.formData', _that.formData)
      // _that.formData.file_size = _that.formData.file_size + 'M'
      this.$parent.$parent.onFinish()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .message{
    color: #F56C6C;
    font-size: 8px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .sun-el-form ::v-deep {
    &.el-form-item__label{
      text-align: left;
      float: none;
    }
    &.el-checkbox:last-of-type{
      margin-right: 20px !important;
    }
  }
</style>
